/* --------------------------------------
		form.css
Contient les elements : 
 - button,
 - formulaire,
-----------------------------------------*/


/* -- Boutons et class boutons -- */
/* ------------------------------ */

/* --- Normal --- */
button,
.button {
	padding: 0.3em 1em;
	height: auto;
	background-image: linear-gradient(to bottom,  rgba(255, 255, 255, 0.18) 0%, rgba(56, 56, 56, 0.10) 100%);
	background-color: #F9F9F9;
	border: 1px solid #CCCCCC;
	border-color: #E1E1E1 #E1E1E1 #BFBFBF #CFCFCF;
	border-radius: 4px;
	box-shadow: inset 0 0 0 rgba(255, 255, 255, 0.2), 0 0 2px rgba(0, 0, 0, 0.05);
	color: #333333;
	text-align: center;
	text-shadow: 0 1px 1px rgba(255, 255, 255, 0.1);
	white-space: nowrap;	
}

button:hover,
.button-hover {
	background-color: #FDFDFD;
	box-shadow: inset 0 0 0 rgba(255, 255, 255, 0.2), 0 0 2px rgba(0, 0, 0, 0.1);
	transition: all 0.1s linear;
}

button:active,
.button-active {
	background-color: #F1F1F1;
	border: 1px solid #DDDDDD;
	box-shadow: inset 0 0 0 rgba(255, 255, 255, 0.2), 0 0 2px rgba(0, 0, 0, 0.05);
}

/* --- Petit bouton --- */
button.small,
.button-small {
	padding: 0.2em 0.5em;
	font-size: 1.1rem;
}

/* --- Bouton de formulaire --- */
button.submit {
	background-color: #3B6B9F;
	border-color: #366393;
	color: #FEFEFE;
}

button.submit:hover {
	background-color: #366393;
	border-color: #315A86;
}

/* --- Bouton basic --- */
.basic-button {
	display: inline-block;
	margin: 1px;
	padding: 1px 6px;
	background-color: #2F5B8A;
	border-radius: 2px;
	font-weight: bold;
	text-align: center;	
	color: #FFFFFF;
	
}

.basic-button:hover {
	background-color: #3D6997;
	color: #FFFFFF;
	text-decoration: none;
}

/* --- Bouton basic avec couleur alternative --- */
.basic-button.alt 		{ background-color: #AAAAAA; }
.basic-button.alt:hover { background-color: #BBBBBB; }

/* --- field button --- */
.field-button {
	display: inline-block;
	font-size: 0;
	white-space: nowrap;
}

.field-button input {
	border-radius: 4px 0 0 4px;
}

.field-button button {
	margin-left: -1px;
	padding: 4px 8px;
	border-radius: 0 4px 4px 0;
	font-size: 11px;
}


/* -- Formulaires -- */
/* ----------------- */
.fieldset-mini {
	margin: 20px auto auto auto;
	width: 540px;
}

fieldset {
	margin: 1.5em 0;
	background: none;
	border: none;	
}

fieldset img {
	max-width: 250px;
}

@media (min-width: 769px) {
	fieldset img {
		max-width: 450px;
	}
}

fieldset.fieldset-submit {
	width: 100%;
	background: none;
	border: none;
	text-align: center;
}

fieldset.fieldset-submit legend {
	display: none;
}

.horizontal-fieldset-desc,
.horizontal-fieldset-element  {
	display: inline-block;
	vertical-align: middle;
}

.horizontal-fieldset-desc + .horizontal-fieldset-element {
	max-width: 100%;
}

.horizontal-fieldset-element .form-field-select {
	max-width: none;
}

optgroup {
	border: none;
	border-bottom: 1px solid #5B5A5A;
	font-weight: bold;
}

option {
	padding: 0 3px;
}

legend {
	display: block;
	margin: 0 0 0.6em 0;
	width: 100%;
	border-bottom: 1px solid #DDDDDD;
	text-transform: none;
	color: #474747;
	font-size: 1.5em;
}

legend > h1 { font-size: inherit; }

/* --- Previsualisation --- */
.xmlhttprequest-preview {
	padding: 0 2px;
	background-color: #FFFFFF;
	border: 1px solid #CCCCCC;
	color: #2E3B5F;
}

.xmlhttprequest-preview img {
	max-width: 600px;
}

/* --- Elements de saisie --- */
input[type=text],
input[type=email],
input[type=url],
input[type=number],
input[type=color],
input[type=tel],
input[type=search],
input[type=password],
input[type=file],
textarea,
select {
	padding: 4px 18px 4px 6px;
	background-color: #FFFFFF;
	border: 1px solid #CCCCCC;
	border-radius: 4px;
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.01);
	color: #555555;
}

input[type=text]:hover,
input[type=email]:hover,
input[type=url]:hover,
input[type=number]:hover,
input[type=color]:hover,
input[type=tel]:hover,
input[type=search]:hover,
input[type=password]:hover,
input[type=file]:hover,
textarea:hover,
select:hover {
	background-color: #FFFFFF;
	border: 1px solid #BBBBBB;
	color: #333333;
}

input[type=text]:focus,
input[type=email]:focus,
input[type=url]:focus,
input[type=number]:focus,
input[type=color]:focus,
input[type=tel]:focus,
input[type=search]:focus,
input[type=password]:focus,
input[type=file]:focus,
textarea:focus,
select:focus {
	border-color: #BBBBBB;
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.01), 0 0 6px rgba(0, 0, 0, 0.2);
	outline: 0;
	color: #222222;
}

input[type=color] {
	padding: 0 2px 0 2px;
	width: 25px;
}

.field-smaller 	{ width: 29px;  }
.field-small   	{ width: 77px;  }
.field-large   	{ width: 200px; }
.field-xlarge 	{ width: 250px; }

.form-field-date,
.form-field-datetime {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
}

.form-field-date .input-date {
	width: 80%;
}

.form-field-datetime .input-date {
	width: 40%;
}

.form-field-datetime .label-time {
	width: 18%;
	position: relative;
	display: inline-block;
}

.form-field-datetime .label-time input {
	padding: 0.309em;
	width: 100%;
}

.label-time:after {
	position: absolute;
	bottom: 18%;
	left: 103%;
	content: attr(data-time);
}

form input:focus:invalid,
form textarea:focus:invalid,
form .constraint-status-error input,
form .constraint-status-error textarea {
	border-color: rgba(196, 60, 43, 0.3);
	box-shadow: 0 0 3px rgba(196, 60, 43, 0.1);
}

form input:focus:valid,
form textarea:focus:valid,
form .constraint-status-right input,
form .constraint-status-right textarea {
	border-color: rgba(71, 137, 72, 0.3);
	box-shadow: 0 0 5px rgba(71, 137, 72, 0.1);
}

input.input-date 		{ width: 100px; }
input.input-hours 		{ width: 50px;  }
input.input-minutes 	{ width: 50px;  }

input[name$="_hours"] 	{ width: 50px;  }
input[name$="_minutes"] { width: 50px;  }

/* --- Cache le generateur de mot de passe sur chrome --- */
.cip-icon-key-small {
	display: none !important;
}

/* --- Element du formulaire (englobe le label et l'input d'un champ) --- */
.form-element,
.form-element-textarea {
	position: relative;
	margin: 0 1em 1em 1em;
}

@media (min-width: 769px) {
	div#main.main-with-left.main-with-right section .form-element,
	div#main.main-with-left.main-with-right section .form-element-textarea {
		margin: 5px 0;
	}
}

.fieldset-description {
	margin: 0 1em 1.5em 1em;
}

@media (max-width: 768px) {
	.form-element,
	.form-element-textarea {
		margin: 0 0.6em 1em 0.6em;
	}

	.fieldset-description {
		margin: 0 0.6em 1.3em 0.6em;
	}
}

@media (max-width: 480px) {
	.form-element,
	.form-element-textarea {
		margin: 0 0.6em 0.5em 0.6em;
	}

	.fieldset-description {
		margin: 0 0.6em 0.9em 0.6em;
	}
}

@media (max-width: 768px) {
	.form-element-textarea + div.center button,
	.fieldset-content > div.center button {
		margin-top: 5px;
	}
}

.form-element [id$="user_avatar"] img {
	max-width: 200px;
}

.form-field {
	position: relative;
	display: inline-block;
	max-width: 600px;
}

@media (max-width:360px) {
	.form-field {
		max-width: 270px;
	}
}

.form-field-free-large {
	width: 100%;
	max-width: none;
}

.form-field-action-link {
	text-align: center;
}

/* --- Label pour les checkbox et radio --- */
.form-field label {
	display: block;
	margin: 0 10px 0 0;
}

/* --- Label pour les inputs [for] et pour les elements sans associations --- */
.form-element > label {
	display: inline-block;
	padding-right: 10px;
	width: 40%;
	text-align: left;
	vertical-align: top;
}

.field-description {
	display: block;
	font-size: 0.8em;
	line-height: 12px;
}

@media (max-width: 768px) {
	.form-element > label {
		width: 100%;
	}

	span.field-description {
		display: inline-block;
		font-size: 0.7em;
		font-style: italic;
	}
}

@media (min-width: 769px) {
	.form-field-select {
		max-width: 59%;
	}
}

.form-field-select select {
	max-width: 100%;
}

input[disabled=disabled],
input[disabled=disabled]:hover,
input[disabled=disabled]:focus,
textarea[disabled=disabled],
textarea[disabled=disabled]:hover,
textarea[disabled=disabled]:focus,
select[disabled=disabled],
select[disabled=disabled]:hover,
select[disabled=disabled]:focus {
	background-color: #F1F1F1;
	border: 1px solid #CCCCCC;
	color: #AAAAAA;
	cursor: not-allowed;
}

input[readonly=readonly],
input[readonly=readonly]:hover,
input[readonly=readonly]:focus,
textarea[readonly=readonly],
textarea[readonly=readonly]:hover,
textarea[readonly=readonly]:focus,
select[readonly=readonly],
select[readonly=readonly]:hover,
select[readonly=readonly]:focus {
	background-color: #FAFAFA;
	border: 1px solid #CCCCCC;
	color: #888888;
}

.form-field-checkbox {
	display: inline-block;
}

/* --- Textarea --- */
.form-field-textarea {
	position: relative;
	display: inline;
	margin: 5px auto;
	width: 99%;
}

textarea {
	width: 100%;
	overflow: auto;
	resize: vertical;
}

.form-element-textarea {
	width: 98%;
	margin: 0 1% 1em;
}

.form-element-textarea textarea {
	width: 100%;
}

.form-element-textarea .form-field-textarea {
	display: block;
}

.form-element-textarea .form-field-textarea div {
	float: left;
}

.form-element-preview, .form-element-reset {
	margin: 5px auto 0 auto;
	text-align: center;
	display: inline;
}

/* --- choix des permissions --- */
.form-element-auth .form-field {
	display: inline-block;
	margin: 2px 0 0 0;
}

.form-element-auth .form-field div[class^="advanced-auth"] {
	float:left;
}

.form-element-auth .field-description {
	display: inline;
	font-style: italic;
}

.advanced-auth-group select {
	padding-right: 5px;
	max-width: 153px;
	overflow-x: auto;
}

.advanced-auth-select select {
	padding-right: 5px;
	max-width: 132px;
	word-wrap: normal;
	overflow-x: auto;
}

.advanced-auth-select {
	margin-left:5px;
}

.advanced-auth-input {
	margin-left: 5px;
	width: auto;
}

.advanced-auth-input input {
	padding: 4px 24px 4px 6px;
}

.advanced-auth-input button {
	margin-left: -29px;
	padding: 5px 5px 6px 5px;
	border-width: 0 0 0 1px;
	border-radius: 0 4px 4px 0;
}

.advanced-auth-input-result {
	margin: 2px 0 0 0;
	width: 138px;
	height: 100px;
}

.bbcode ~ .form-field-textarea textarea {
	border-radius: 0 0 4px 4px;
	border-width: 0 1px 1px 1px;
}

@media (min-width: 769px) {
	.form-element-textarea-small {
		width: 49%;
	}
}

@media (max-width: 480px) {
	.form-element-auth .form-field .advanced-auth-input {
		float: none;
		margin: 5px 0 0 0;
	}
}

/* --- Verification des contraintes de formulaire --- */
.constraint-status-error input,
.constraint-status-error textarea {
	border-color: rgba(196, 60, 43, 0.3);
	box-shadow: inset 0 0 3px rgba(196, 60, 43, 0.1);
	color: #C43C35;
}

.constraint-status-error input:hover,
.constraint-status-error input:focus,
.constraint-status-error textarea:hover,
.constraint-status-error textarea:focus {
	border-color: rgba(196, 60, 43, 0.5);
	box-shadow: inset 0 0 6px rgba(196, 60, 43, 0.3);
	color: #C43C35;
}

.text-status-constraint {
	position:absolute;
	display: block;
	z-index: 1;
	padding: 6px 5px;
	left: 5px;
	min-width: 20em;
	background-color: #FEFEFE;
	border: 1px solid #EAEAEA;
	box-shadow: 1px 3px 6px rgba(0, 0, 0, 0.3);
	border-radius: 3px;
	font-size: 0.8em;
	font-weight: bold;
	text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5);
}

input + .text-status-constraint {
	top: 25px;
}

.text-status-constraint:after,
.text-status-constraint:before {
	content: " ";
	position: absolute;
}

.text-status-constraint:before {
	left: 8px;
	top: -9px;
	border-bottom: 9px solid rgba(230, 230, 230, 1);
	border-left: 9px solid transparent;
	border-right: 9px solid transparent;
}

.text-status-constraint:after {
	left: 9px;
	top: -8px;
	border-bottom: 8px solid rgba(250, 250, 250, 1);
	border-left: 8px solid transparent;
	border-right: 8px solid transparent;
}

div.field-required:after,
div.picture-status-constraint:after {
	display: inline-block;
	position: absolute;
	right: 4px;
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

div.field-required:after {
	top: 10px;
	opacity: 0.6;
	color: #C43C35;
	font-size: 0.8rem;
	content: "\f069";
}

.form-field-date.field-required:after,
.form-field-date.picture-status-constraint:after {
	right: 24px;
}

.form-field-select.field-required:after,
.form-field-number.field-required:after,
.form-field-decimal.field-required:after {
	right: -10px;
}

.form-field-datetime.field-required:after {
	right: -15px;
}

.form-field-checkbox.field-required:after {
	right: -20px;
	top: 0;
}

.form-field-upload-file.field-required:after {
	right: 43px;
	top: 12px;
}

.constraint-status-right .form-field-upload-file.picture-status-constraint:after {
	right: 40px;
	top: 8px;
}

.constraint-status-right .form-field-color:after,
.constraint-status-right .form-field-select:after,
.constraint-status-right .form-field-number:after,
.constraint-status-right .form-field-decimal:after {
	right: -20px;
}

.constraint-statuts-right .form-field-checkbox:after {
	top: 4px;
}

.constraint-statuts-right .form-field-datetime:after {
	right: -22px;
}

.form-field-number input,
.form-field-decimal input,
.form-field-datetime input {
	padding-right: 2px;
}

.form-element-date .constraint-status-error div.field-required:after,
.form-element-date .constraint-status-right div.field-required:after {
	right: 10px;
}

.form-field-textarea.field-required:after,
.constraint-status-right .form-field-textarea.field-required:after,
.constraint-status-right .form-field-textarea.field-required:after {
	top: 45%;
}

.constraint-status-right div.field-required:after {
	content: " ";
}

.constraint-status-right div.form-field-checkbox.picture-status-constraint:after {
	top: 0;
}

.constraint-status-right div.picture-status-constraint:after {
	opacity: 1;
	font-size: 1.5rem;
	top: 6px;
}

.constraint-status-error .form-field-textarea .picture-status-constraint:after,
.constraint-status-right .form-field-textarea .picture-status-constraint:after {
	top: 40%;
}

.constraint-status-right div.picture-status-constraint:after {
	content: "\f00c";
	color: #57A957;
}

.constraint-status-error i.picture-status-constraint {
	content: "\f056";
	color: #C43C35;
}

.form-field-multi-select.field-required:after {
	display: none;
}

.constraint-status-right .form-field-multi-select select {
	border-color: rgba(71, 137, 72, 0.3);
	box-shadow: 0 0 5px rgba(71, 137, 72, 0.1);
}

.form-field-radio-button.field-required:after,
.form-field-multiple-checkbox.field-required:after {
	top: 4px;
	right: -16px;
}

.form-field-radio {
	display: inline-block;
}

/* --- HTML Table--- */
.html-table-header-sortable {
	float: right;
}

@media (max-width: 768px) {
	.html-table-header-sortable {
		display: none;
	}
}

.html-table-header-sortable .fa-caret-up 	{ margin-bottom: -4px; }
.html-table-header-sortable .fa-caret-down 	{ margin-top: -12px; }

.html-table-header-sortable .sort-active {
	color: #AAAAAA;
}

/* --- Auto-completion --- */
.autocomplete-suggestions {
	background-color: #FFFFFF;
	border: 1px solid #999999;
	overflow: auto;
}

.autocomplete-suggestions strong {
	font-weight: normal;
	color: #3399FF;
}

.autocomplete-suggestion {
	padding: 2px 5px;
	white-space: nowrap;
	overflow: hidden;
	cursor: pointer;
}

.autocomplete-selected {
	background-color: #F0F0F0;
}

.autocomplete-no-suggestion {
	text-align: center;
}

div[id*='keyword'] .form-autocompleter-container input {
	max-width: calc(100% - 20px);
}

/* --- Lined textarea --- */
.linedwrap {
	max-width: 100%;
}

.linedtextarea {
	display: inline-block;
	margin: 0;
	padding: 0 0 0 10px;
	width: calc(100% - 60px);
	height: 100%;
	background-color: #FFFFFF;
}

.linedtextarea textarea,
.linedwrap .codelines .lineno {
	font-size: 10pt;
	font-family: monospace;
	line-height: normal !important;
}

.linedtextarea textarea {
	margin: 0;
	padding: 5px 0 0 0;
	width: 100% !important;
	height: 100%;
	border: 0;
}

.linedwrap .lines {
	display: inline-block;
	overflow: hidden;
	margin-top: 0;
	padding: 5px 0 0 0;
	width: 50px;
	height: 100%;
	background-color: #FFFFFF;
	border-right: 1px solid #C0C0C0;
}

.linedwrap .codelines .lineno {
	padding: 0.0em 0.5em 0 0;
	text-align: right;
	color: #AAAAAA;
	white-space: nowrap;
}

.linedwrap .codelines .lineselect {
	color: red;
}

.auth-setter {
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: row;
	-ms-flex-direction: row;
	flex-direction: row;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}